@import "src/common";
.page {
  min-height: 100vh;
  background: #F7F8F9;
  .bg{
    background: no-repeat top center/100% auto;
    width: 100%;
    height: 206px;
    transition: 0.5s;
    margin-bottom: -30px;
  }
  .page-content {
    .white-bg{
      padding-top: 32px;
      border-radius: 24px 24px 0px 0px;
      background: white;
    }
    .part-1 {
      width: 686px;
      margin: 0 auto;
      justify-content: space-between;

      .col-1 {
        flex-direction: column;
        align-items: flex-start;
        flex: 1;

        .r-1 {
          font-size: 32px;
          font-weight: 500;
          line-height: 42px;
          color: #1D2129;
          margin-bottom: 24px;
          height: 42px;
          width: 100%;
          display: flex;

          .flex-cs {
            flex: 1;
            width: 0;
          }

          .img {
            display: block;
            width: 50px;
            height: 50px;
          }
        }

        .r-2 {
          font-size: 24px;
          font-weight: 400;
          line-height: 24px;
          width: 100%;
          display: flex;
          white-space: nowrap;

          .flex-cs {
            flex: 1;
            width: 0;
          }
        }
      }

      .col-2 {
        width: 136px;
        justify-content: space-between;
        margin-left: 22px;

        .c-1, .c-2 {
          flex-direction: column;
          font-size: 24px;
          font-weight: 400;
          line-height: 24px;
          color: #A5A6A9;

          .img {
            width: 60px;
            height: 60px;
            margin-bottom: 16px;
          }
        }
      }
    }

    .part-2 {
      background: white;

      .row-1 {
        height: 312px;

        .swiper-box {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: flex-end;

          .swiper-img {
            transition: 0.1s;
            width: 176px;
            height: 244px;
            border-radius: 12px;
          }

          &.active {
            .swiper-img {
              width: 192px;
              height: 272px;
            }
          }
        }
      }

      .row-2 {
        flex-direction: column;
        padding: 24px 0;

        .r-1 {
          font-size: 32px;
          font-weight: 500;
          line-height: 32px;
          color: #1D2129;
          margin-bottom: 20px;

        }

        .r-2 {
          font-size: 24px;
          font-weight: 400;
          line-height: 24px;
          color: #8E9094;
        }
      }
    }

    .part-3 {
      .row-1 {
        height: 78px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);

        .flex-cc {
          font-size: 28px;
          font-weight: 400;
          color: #777A7F;
          height: 100%;

          &.active {
            font-size: 32px;
            font-weight: 500;
            color: #1D2129;
            position: relative;

            &:after {
              content: '';
              background: var(--theme-color);
              width: 40px;
              height: 6px;
              border-radius: 4px;
              position: absolute;
              left: 50%;
              margin-left: -20px;
              bottom: 0;
            }
          }
        }
      }

      .row-2 {
        padding: 24px 22px;

        .vip {
          justify-content: space-between;
          height: 72px;
          padding: 12px 16px;
          border-radius: 20px;
          background: linear-gradient(90deg, #FFF0D9 0%, #FFFFFF 39.8%);
          margin-bottom: 20px;

          .i-1 {
            width: 124px;
            height: 32px;
            margin-right: 8px;
          }

          .i-2 {
            font-size: 24px;
            font-weight: 400;
            line-height: 24px;
          }

          .i-3 {
            padding: 12px 24px;
            border-radius: 32px;
            background: #F1D4A0;
            font-size: 24px;
            font-weight: 500;
            line-height: 24px;
            color: #6B490D;
          }
        }

        .item {
          white-space: nowrap;
          background: #FFFFFF;
          padding: 24px 16px;
          height: 124px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          border-radius: 20px;


          .c-1, .c-3 {
            height: 100%;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            flex-direction: column;
          }

          .c-1 {
            width: 156px;

            .i-1 {
              font-size: 36px;
              font-weight: 500;
              line-height: 36px;
              color: #1D2129;
            }

            .i-2 {
              font-size: 24px;
              font-weight: 400;
              line-height: 24px;
              color: #8E9094;
            }
          }

          .c-2 {
            flex: 1;
            width: 0;
            .i-1 {
              font-size: 28px;
              font-weight: 400;
              line-height: 28px;
              color: #4A4D54;
            }

            .i-2 {
              padding-top: 24px;
              font-size: 24px;
              font-weight: 400;
              line-height: 24px;
              color: #8E9094;
            }
          }

          .c-3 {
            color: var(--theme-color);
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            .i-1 {
              font-size: 24px;
              font-weight: 400;
              line-height: 15.6px;

              .num {
                font-size: 36px;
                font-weight: 500;
                line-height: 36px;
              }
            }

            .i-2 {
              font-size: 20px;
              font-weight: 400;
              line-height: 26px;
              display: flex;
              align-items: center;

              .num {
                font-size: 28px;
                font-weight: 500;
                line-height: 28px;
              }

              .label {
                padding: 4px 8px;
                border-radius: 4px;
                border: 1px solid var(--sub-theme);
                margin-right: 8px;
                font-size: 18px;
                font-weight: 400;
                line-height: 18px;
                color: var(--sub-theme);
                margin-left: 8px;
              }
            }
          }

          .c-4 {
            margin-left: 34px;
            .flex-cc {
              width: 104px;
              height: 56px;
              border-radius: 32px;
              background: var(--theme-color);
              font-size: 24px;
              font-weight: 500;
              line-height: 24px;
              color: #FFFFFF;

            }
          }
        }
      }
    }
  }
}
